<script>
export default {
	name: 'bh-row',
	componentName: 'BHRow',
	props: {
		tag: {
			type: String,
			default: 'div'
		},
		gutter: Number,
		type: String,
		justify: {
			type: String,
			default: 'start'
		},
		align: {
			type: String,
			default: 'top'
		}
	},
	computed: {
		style() {
			const ret = {};

			if (this.gutter) {
				ret.marginLeft = `-${this.gutter / 2}px`;
				ret.marginRight = ret.marginLeft;
			}

			return ret;
		}
	},
	render(h) {
		let classList = [
			'bh-row',
			this.justify !== 'start' ? `is-justify-${this.justify}` : '',
			this.align !== 'top' ? `is-align-${this.align}` : '',
			{
				'bh-row--flex': this.type === 'flex',	
			}
		];

		return h(this.tag, {
			class: classList,
			style: this.style
		}, this.$slots.default);
	},
}
</script>
